<template>
  <ContainerGroup class="group">
    <Container v-if="asideShow" class="aside" :style="style">
      <slot name="aside" />
    </Container>
    <Container class="main" :style="mainStyle">
      <Container v-if="searchBarShow" class="search-bar" :style="{'margin-bottom': noGap ? '0' : '8px'}">
        <slot name="searchBar" />
      </Container>
      <Container class="main-content">
        <Container v-if="mainAsideShow" class="main-aside" :style="style">
          <slot name="mainAside" />
        </Container>
        <Container class="content" :style="contentStyle">
          <slot name="content" />
        </Container>
      </Container>
    </Container>
  </ContainerGroup>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {
    asideShow: {
      type: [String, Boolean],
      default: false
    },
    asideWidth: {
      type: Number,
      default: 0
    },
    searchBarShow: {
      type: [String, Boolean],
      default: false
    },
    mainAsideShow: {
      type: [String, Boolean],
      default: false
    },
    mainAsideWidth: {
      type: Number,
      default: 0
    },
    noGap: {
      type: [String, Boolean],
      default: false
    }
  },
  data() {
    return {
      style: '',
      mainStyle: '',
      contentStyle: ''
    }
  },
  created() {
    if (this.mainAsideShow) {
      if (this.mainAsideWidth) {
        this.style = `width: ${this.mainAsideWidth}px;flex: 0 0 ${this.mainAsideWidth}px`
        this.contentStyle = `width: calc(100% - ${this.mainAsideWidth + 8}px)`
      } else {
        this.contentStyle = 'width: 100%'
        this.style = `width: 220px;flex: 0 0 220px`
      }
    } else {
      if (this.asideWidth) {
        this.style = `width: ${this.asideWidth}px;flex: 0 0 ${this.asideWidth}px`
        this.mainStyle = `width: calc(100% - ${this.asideWidth + 8}px)`
      } else {
        this.mainStyle = 'width: calc(100% - 228px)'
        this.style = `width: 220px;flex: 0 0 220px`
      }
    }
  },
  mounted() {},
  methods: {
  }
}
</script>

<style lang="less" scoped>
.group{
  flex: 1;
  flex-direction: row !important;
}
.aside{
  margin-right: 8px;
}
.main{
  flex: 1;
  width: 100%;
  background-color: #f0f2f5 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  .search-bar{
    margin-bottom: 8px;
  }
  .main-content{
    flex: 1;
    // height: calc(100% - 65px);
    overflow-y: auto;
    display: flex;
    background-color: #f0f2f5 !important;
    padding: 0 !important;
    .main-aside{
      margin-right: 8px;
    }
    .content{
      flex: 1;
      width: 100%;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
    }
  }
}
</style>
